<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
	<title>阅读是最美的风景</title>
	<link rel="stylesheet" href="/assets/activity/jindi/css/reset.css">
	<link rel="stylesheet" href="/assets/activity/jindi/css/swiper.min.css">
	<link rel="stylesheet" href="/assets/activity/jindi/css/animate.min.css">
	<style type="text/css">
		body{
			max-width: 640px;
			margin: 0 auto;
		}
		@font-face { 
			font-family: yuweishufa; 
			src: url('/assets/activity/jindi-4/yuweishufa.TTF');
		}
		.swiper-container {
	        width: 100%;
	        height: 100%;
	    }
	    .page1{
	    	background: url(/assets/activity/jindi-4/page1.jpg);
	    	-webkit-background-size: cover;
	    	background-size: cover;
	    }
	    .page2{
	    	background: url(/assets/activity/jindi-4/page2.jpg);
	    	-webkit-background-size: cover;
	    	background-size: cover;
	    }
	    .page3{
	    	background: url(/assets/activity/jindi-4/page3.jpg);
	    	-webkit-background-size: cover;
	    	background-size: cover;
	    }
	    .page4{
	    	background: url(/assets/activity/jindi-4/page4.jpg);
	    	-webkit-background-size: cover;
	    	background-size: cover;
	    }
	    .page6{
	    	background: url(/assets/activity/jindi-4/page6.jpg);
	    	-webkit-background-size: cover;
	    	background-size: cover;
	    }
	    .logo{
	    	position: absolute;
	    	top: 0.3rem;
	    	left: 5%;
	    	z-index: 2;
	    	width: 35%;
	    }
	    .text-vertical .text-chinese{
	    	position: absolute;
	    	z-index: 2;
			top: 1.6rem;
			left: 2rem;
	    }
	    .text-vertical .text-chinese span{
			width: 1em;
	    	float: left;
	    	margin-right: 0.2rem;
	    }
	    .text-vertical .text-chinese span:nth-child(2n){
	    	padding-top: 1rem;
	    }
	    .text-chinese{
	    	color: #f65e54;
	    	font-size: 0.26rem;
	    }
	    .text-vertical .text-english span{
			display: block;
			
	    }
	    .text-vertical .text-english{
	    	position: absolute;
			top: 49%;
			left: 28%;
			transform: rotate(90deg) scale(0.8);
			white-space: nowrap;
			font-size: 10px;
	    }
	    .page2 .text-vertical .text-chinese{
	    	top: 1rem;
	    }
	    .page2 .text-vertical .text-chinese span:nth-child(2n){
			padding-top: 0.5rem;
	    }
	    .page2 .text-vertical .text-english{
	    	top: 38%;
	    }
	    .text-horizontal span{
			display: block;
	    }
	    .text-horizontal .text-chinese{
	    	position: absolute;
	    	top: 2.8rem;
	    	left: 1rem;
	    }
	    .text-horizontal .text-english{
	    	position: absolute;
	    	top: 3.8rem;
	    	right: 0.4rem;
	    	text-align: right;
	    	font-size: 10px;
	    	transform: scale(0.8);
	    }
	    .text-horizontal .text-english span{
	    	margin-bottom: 0.6em;
	    }
	    .text-horizontal .text-english span:first-child{
	    	padding-right: 0.4rem;
	    }
	    .page4 .text-chinese{
	    	position: absolute;
	    	top: 1rem;
	    	left: 0.7rem;
	    }
	    .page4 .text-chinese span{ 
			display: block;
	    }
	    .page4 .text-english{
	    	position: absolute;
	    	top: 43%;
	    	left: -0.3rem;
	    	font-size: 10px;
	    	transform: scale(0.8);
	    }
	    .page4 .text-english span{
	    	display: block;
	    	margin-bottom: 0.2em;
	    }
	    .form{
	    	position: absolute;
	    	bottom: 0.6rem;
	    	left: 0;
	    	width: 100%;

	    	z-index: 1;
	    }
	    .row{
	    	margin-bottom: 0.15rem;
	    	width: 100%;
	    	padding-left: 0.8rem;
	    }
	    .form label{
	    	display: inline-block;
	    	width: 5em;
	    	font-family: yuweishufa;
	    	font-size: 0.24rem;
			line-height:0.66rem;
	    }
	    .form input{
	    	font-family: yuweishufa;
	    	font-size: 0.24rem;
	    	width: 50%;
	    	height: 0.66rem;
	    	border: none;
	    	outline: none;
	    	border-bottom: 1px solid #000;
	    	padding: 0 1em;
	    }
	    .create{
	    	display: block;
	    	width: 35%;
	    	height: 0.5rem;
	    	background: #f8ac9e;
	    	margin: 0.35rem auto 0;
	    	text-align: center;
	    	line-height: 0.5rem;
	    	border-radius: 4px;
	    	color: #fff;
	    	font-size: 0.24rem;
	    	letter-spacing: 0.2em;
	    	box-shadow: 2px 2px 1px #e6656f;
	    }
	    .bill .text{
	    	font-family: yuweishufa;
	    	font-size: 0.4rem;
	    	color: red;
	    	position: absolute;
	    	bottom: 0.5rem;
	    	text-align: center;
	    	width: 100%;
	    	padding: 0 5%;
	    }
	    .bill{
	    	width: 100%;
	    	height: 100%;
	    	position: absolute;
	    	top: 0;
	    	left: 0;
	    	z-index: -1;
	    }
	    #canv canvas{
	    	position: absolute;
	    	top: 0;
	    	left: 0;
	    	z-index: 3;
	    }
	    .bill-pic{
	    	width: 100%;
	    }
		.new-img{
			width:100%;
			position: absolute;
			top:0;
			left:0;
			z-index: 20;
		}
		.tips{
			position: absolute;
			top: 50%;
			right:0.1rem;
			-webkit-transform:scale(0.8) translateY(-60%);
			-moz-transform: scale(0.8) translateY(-60%);
			transform:scale(0.8) translateY(-60%);
			z-index: 21;
			font-size:10px;
			width:1em;
			color:#fff;
		}
	</style>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script type="text/javascript" src="/assets/activity/jindi/js/swiper.min.js"></script>
	<script type="text/javascript" src="/assets/activity/jindi/js/rem.js"></script>
	<script type="text/javascript" src="/assets/activity/jindi/js/swiper.animate1.0.2.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
	<script type="text/javascript" src="/assets/activity/jindi-4/html2canvas.js"></script>
	<script src='/assets/js/codeigniter-csrf.js'></script>
</head>
<body>
	<!-- Swiper -->
    <div class="swiper-container">
		<div class="player active">
			<img src="/assets/activity/jindi-2/img/palyer.png" alt="" class="player-img">
			<audio src="http://assets-cdn.udfang.com/music/20170616/h5-jd-bgm-4.mp3" autoplay="autoplay" loop="loop" id="media"></audio>
		</div>
        <div class="swiper-wrapper">
             <div class="swiper-slide page1">
            	<div class="text text-vertical">
            		<p class="text-chinese clearfix">
            			<span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s">或许你曾赤手空拳</span>
            			<span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">但有了书你就有了诗和远方</span>
            		</p>
            		<p class="text-english ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
            			<span>if you hold a book</span>
            			<span>then you will own a poem and a distance</span>
            		</p>
            	</div>
            </div>
            <div class="swiper-slide page2">
            	<div class="text text-vertical">
            		<p class="text-chinese clearfix">
            			<span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" >或许你正春风得意</span>
            			<span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">若没有书就会变得只剩苟且</span>
            		</p>
            		<p class="text-english ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
            			<span>if there's no book, you will grasp nothing</span>
            		</p>
            	</div>
            </div>
            <div class="swiper-slide page3">
            	<div class="text text-horizontal">
            		<p class="text-chinese clearfix">
            			<span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s">阅读是最美的风景</span>
            			<span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">有诗有远方还有曾经迷失的你</span>
            		</p>
            		<p class="text-english ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
            			<span>Reading is the most beautiful scenery  Where possess poems</span>
            			<span>distance and  yourself who ever lost in the life</span>
            		</p>
            	</div>
            </div>
            <div class="swiper-slide page4">
            	<div class="text">
            		<p class="text-chinese clearfix">
            			<span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s">上传你的阅读瞬间，留下你的阅读宣言</span>
            			<span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">生成一张专属你的海报，为阅读代言</span>
            		</p>
            		<p class="text-english ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
	            		<span>Upload your reading moment, leave your reading declaration</span>
						<span>Generate an exclusive sea of your newspaper, for reading endorsement</span>
	            	</p>
            	</div>
            	<div class="form">
            		<div class="row">
            			<label for="">姓名：</label>
            			<input type="text" id="name" maxlength="10">
            		</div>
            		<div class="row">
            			<label for="">阅读宣言：</label>
            			<input type="text" id="con">
            		</div>
            		<a class="create">生成海报</a>
            	</div>
				<p class="tips">长按保存图片或分享到朋友圈</p>
            </div>
            <div class="swiper-slide page6">
				<div class="cover">
					<p>阅读数：<span class="num"><?php echo $view_nums;?></span>	</p >
				</div>
			</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		wx.config(<?php echo $js->config(array('onMenuShareTimeline','onMenuShareAppMessage'), false) ?>);
		wx.ready(function () {
			wx.onMenuShareTimeline({
				title: '上传你的阅读瞬间，留下你的阅读宣言', // 分享标题
				desc: '有了书你就有了诗和远方', // 分享描述
				link: 'http://udfang.com/activity/html5four', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: 'http://udfang.com/assets/activity/jindi-4/share.jpg', // 分享图标
			});
			wx.onMenuShareAppMessage({
				title: '上传你的阅读瞬间，留下你的阅读宣言', // 分享标题
				desc: '有了书你就有了诗和远方', // 分享描述
				link: 'http://udfang.com/activity/html5four', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: 'http://udfang.com/assets/activity/jindi-4/share.jpg', // 分享图标
			});
		})
	</script>
	<script type="text/javascript">

//	    function hechen(){
//
//	        var mainCtx = getCanvasContext('main');
//	        mainCtx.clearRect(0,0,1000,1000);
//	        var logoWidth = w*0.35;
//	        var top = h*0.87;
//        	var top2 = top + 50;
//	        //因为没法直接读取本地图片 所以做了这部操作
//	        var starImg = new Image();
//	        var codeImg = new Image();
//	        var logoImg = new Image();
//	        starImg.src='/assets/activity/jindi-4/page5.jpg';
//	        codeImg.src='/assets/activity/jindi-4/code.jpg';
//	        logoImg.src='/assets/activity/jindi-4/logo-white.png';
//
//	        starImg.onload=function(){
//	            //先把图片绘制在这里
//	            mainCtx.drawImage(starImg,0,0,w,h);
//	            mainCtx.drawImage(codeImg,w-105,30,80,80);
//	            mainCtx.drawImage(logoImg, 20,20,logoWidth,13);
//                mainCtx.font = 'small-caps bold 0.5rem yuweishufa';
//                mainCtx.fillStyle = "#fff";
//                mainCtx.textAlign = 'center';
//                mainCtx.fillText("我是" + $('#name').val(),w/2,top);
//                mainCtx.fillText($('#con').val(),w/2,top2);
//                mainCtx.font = 'small-caps normal 0.18rem 微软雅黑';
//                mainCtx.fillStyle = "rgba(255,255,255,.5)";
//                mainCtx.fillText('长按保存或分享给朋友',w-70,20);
//	        };
//
//	    }
//
//	    function getCanvasContext(id){
//	        return document.getElementById(id).getContext("2d");
//	    }
//
//	    function saveImageInfo() {
//			var mycanvas = document.getElementById("main");
//	        var imageUrl = mycanvas.toDataURL("image/jpeg");
//			console.log(imageUrl);
//	    }
//
//		var swiper = new Swiper('.swiper-container', {
//	        pagination: '.swiper-pagination',
//	        paginationClickable: true,
//	        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
//			    swiperAnimateCache(swiper); //隐藏动画元素
//			    swiperAnimate(swiper); //初始化完成开始动画
//			},
//			onSlideChangeEnd: function(swiper){
//			    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
//			}
//	    });
var swiper = new Swiper('.swiper-container', {
	pagination: '.swiper-pagination',
	paginationClickable: true,
	onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
		swiperAnimateCache(swiper); //隐藏动画元素
		swiperAnimate(swiper); //初始化完成开始动画
	},
	onSlideChangeEnd: function(swiper){
		swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	}
});

$('.create').on("click",function(){
//	console.log(1);
//	var oname = $("#name").val();
//	var ocon = $('#con').val();
//	$('.user-name').text(oname);
//	$('.declaration').text(ocon);
//	if (oname != '' && ocon != '') {
//		$('.bill').css("z-index", 3);
//		html2canvas($('#canv'), {
//			onrendered: function(canvas) {
//				canvas.id = "mycanvas";
//				var newImg = document.createElement("img");
//				var dataUrl = canvas.toDataURL();
//				newImg.src =  dataUrl;
////				$('.page4').append('<img src='+dataUrl+' class="new-img" />');
//				$.ajax({
//					url: '/Activity/mergePic',
//					type: 'post',
//					data: {'img':dataUrl,'ci_csrf_token': ci_csrf_token(),},
//					dataType: "json",
//					success: function (data) {
//						var newImg = data.img;
//						$('#canv').append('<img src='+newImg+' class="new-img" />');
//					},
//					error: function (xhr, errorType, error) {
//						alert(error);
//					}
//				});
//			}
//		});
//	}else{
//		alert("输入的内容不能为空");
//		return false;
//	}
	var oname = $("#name").val();
	var ocon = $('#con').val();

	var width = $('.page4').width();
	var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
	if(reg.test(oname)){
		var ntleft = (640-(oname.length+2)*50)/2;
	}else{
		var ntleft = (640-(oname.length+2)*27)/2;
	}
	if(reg.test(ocon)){
		if(ocon.length >12){
			alert("阅读宣言中文建议12个字以内~");
			return false;
		}
		var ctleft = (640-ocon.length*50)/2;
	}else{
		if(ocon.length >28){
			alert("阅读宣言英文建议28个字母以内~");
			return false;
		}
		var ctleft = (640-ocon.length*23)/2;
	}

//	alert(oname.length+2);
//	alert(ocon.length);
//	alert(ctleft);
//	return false;
	if (oname != '' && ocon != '') {
		$.ajax({
			url: '/Activity/mergePic',
			type: 'post',
			data: {
				'oname':oname,
				'ocon':ocon,
				'width':width,
				'ntleft':ntleft,
				'ctleft':ctleft,
				'ci_csrf_token': ci_csrf_token()
			},
			dataType: "json",
			success: function (data) {
				var newImg = data.img;
				console.log(data);
				$('.page4').append('<img src='+newImg+' class="new-img" />');

			},
			error: function (xhr, errorType, error) {
				alert(error);
			}
		});
	}else{
		alert("输入的内容不能为空");
		return false;
	}
})
// 播放器
document.addEventListener("WeixinJSBridgeReady", function () {
	document.getElementById('media').play();
}, false);
$('.player').on("click",function(){
	$(this).toggleClass('active');
	if($('.player').hasClass('active')){
		$(this).find('audio').attr("src","http://assets-cdn.udfang.com/music/20170616/h5-jd-bgm-4.mp3");
	}else{
		$(this).find('audio').attr("src","");
	}
})
</script>
</body>
</html>